<template>
  <div class="background-form-wrapper">
    <el-form :model="backgroundForm" label-width="80px">
      <el-form-item label="背景图片">
        <el-input v-model="backgroundForm.backgroundImage" placeholder="请输入背景图片" />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="backgroundForm.backgroundColor" />
      </el-form-item>
      <el-form-item label="起始位置">
        <el-input v-model="backgroundForm.backgroundPosition" />
      </el-form-item>
      <el-form-item label="图像尺寸">
        <el-input v-model="backgroundForm.backgroundSize" />
      </el-form-item>
      <el-form-item label="平铺模式">
        <el-select v-model="backgroundForm.backgroundRepeat" placeholder="请选择定位方式">
          <el-option
            v-for="item in backgroundRepeatOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="定位选择">
        <el-select v-model="backgroundForm.backgroundOrigin" placeholder="请选择定位选择">
          <el-option
            v-for="item in backgroundOriginOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="绘制区域">
        <el-select v-model="backgroundForm.backgroundClip" placeholder="请选择绘制区域">
          <el-option
            v-for="item in backgroundClipOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import {
  backgroundRepeatOptions,
  backgroundOriginOptions,
  backgroundClipOptions,
} from "@/config/form/index";
import { defineComponent, computed } from "vue";
export default defineComponent({
  name: "BackgroundForm",
  props: {
    property: {
      default: () => ({
        backgroundImage: "",
        backgroundColor: "",
        backgroundPosition: "0% 0%",
        backgroundSize: "auto auto",
        backgroundRepeat: "repeat",
        backgroundOrigin: "padding-box",
        backgroundClip: "border-box",
      }),
    },
    componentName: {
      type: String,
      require: true,
    },
  },
  setup(props) {
    const backgroundForm = computed(() => {
      return props.property;
    });
    return {
      backgroundForm,
      backgroundRepeatOptions,
      backgroundOriginOptions,
      backgroundClipOptions,
    };
  },
});
</script>
